<template>
    <div class="card-box">
        <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" :title="isEdit?'历史任务办理过程信息':'历史任务办理过程信息'">
            <div>
                <div class="card-title">
                    <span>历史办理过程信息</span>
                </div>
                <el-table class="flowTable" stripe :data="assessInfoData" align="center">
                    <el-table-column label="序号" type="index" width="55" align="center">
                    </el-table-column>
                    <el-table-column label="任务定义编号" prop="taskDefKey" width="120" align="center">
                        <template slot-scope="scope">
                            <span v-if="infoEdit[scope.$index]">{{scope.row.taskDefKey}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="流程实例编号" prop="procInstId" width="120" align="center">
                        <template slot-scope="scope">
                            <span v-if="infoEdit[scope.$index]">{{scope.row.procInstId}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="流程执行编号" prop="executionId" width="120" align="center">
                        <template slot-scope="scope">
                            <span v-if="infoEdit[scope.$index]">{{scope.row.executionId}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="任务名称" prop="name"  width="140" align="center">
                        <template slot-scope="scope">
                            <span v-if="infoEdit[scope.$index]">{{scope.row.name}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="任务办理人" prop="formKey"  width="140" align="center">
                        <template slot-scope="scope">
                            <span v-if="infoEdit[scope.$index]">{{scope.row.formKey}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="开始任务时间" prop="startTime"  width="180" align="center">
                        <template slot-scope="scope">
                            <span v-if="infoEdit[scope.$index]">{{scope.row.startTime}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="结束任务时间" prop="endTime"  width="180" align="center">
                        <template slot-scope="scope">
                            <span v-if="infoEdit[scope.$index]">{{scope.row.endTime}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="办理时长(毫秒)" prop="duration" width="140" align="center">
                        <template slot-scope="scope">
                            <span v-if="infoEdit[scope.$index]">{{scope.row.duration}}</span>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="card-title">
                    <span>历史变量信息</span>
                </div>
                <el-table class="flowTable" stripe :data="assessInfoData2" align="center" >
                    <el-table-column label="序号" type="index" width="55" align="center">
                    </el-table-column>
                    <el-table-column label="流程实例编号" prop="procInstId" width="120" align="center">
                        <template slot-scope="scope">
                            <span v-if="infoEdit2[scope.$index]">{{scope.row.procInstId}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="流程执行编号" prop="executionId"  width="120" align="center">
                        <template slot-scope="scope">
                            <span v-if="infoEdit2[scope.$index]">{{scope.row.executionId}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="变量名称" prop="name" width="120" align="center">
                        <template slot-scope="scope">
                            <span v-if="infoEdit2[scope.$index]">{{scope.row.name}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="变量类型" prop="varType" width="120" align="center">
                        <template slot-scope="scope">
                            <span v-if="infoEdit2[scope.$index]">{{scope.row.varType}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="变量值" prop="text" width="280" align="center">
                        <template slot-scope="scope">
                            <span v-if="infoEdit2[scope.$index]">{{scope.row.text}}{{scope.row.text2}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间" prop="createTime" width="180" align="center">
                        <template slot-scope="scope">
                            <span v-if="infoEdit2[scope.$index]">{{scope.row.createTime}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="修改时间" prop="lastUpdatedTime" width="180" align="center">
                        <template slot-scope="scope">
                            <span v-if="infoEdit2[scope.$index]">{{scope.row.lastUpdatedTime}}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="closeDialog()">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {fetchListInfo} from "~/views/wy-flow/api/acthiprocinst"
    export default {
        name: "hand-proced",
        components: {},
        data() {
            return {
                assessInfoData: [],
                assessInfoData2:[],
                infoEdit: [true],
                infoEdit2: [true],
                loading: false,
                dialogVisible: false,
                isEdit: false
            }
        },
        computed: mapState({
            user: state => state.user.user
        }),
        created: function(){
            // this.getSelectData()
        },
        mounted() {
        },
        methods: {
            show(rowData){
                this.loading = false
                this.dialogVisible = true
                fetchListInfo(rowData.id).then(response => {
                    this.assessInfoData = response.data.data.actHiTaskinstRecords
                    var assessLength = this.assessInfoData.length
                    for(var i=0; i<assessLength; i++){
                        this.infoEdit[i]=true
                    }

                    this.assessInfoData2 = response.data.data.actHiVarinstRecords
                    var assessLength2 = this.assessInfoData2.length
                    for(var i=0; i<assessLength2; i++){
                        this.infoEdit2[i]=true
                    }
                }).catch(() => {
                    this.tableLoading=false
                })
            },
            closeDialog(){
                this.dialogVisible = false
            }
        }
    }
</script>
<style scoped lang='scss'>
    
    @include formWrap();
    .card-box{
        /deep/ table{
            max-width: 100%;
        }
        .card-title{
            margin-bottom: 20px;
        }
    }
</style>
